<template>
	<div>
		<div class="agent">
			<div class="agent-1">
				<Icon type="ios-arrow-back" v-on:click="backs"></Icon>
				<input type="text" placeholder="请输入小区或商圈名称" />
				<span><img src="../../../static/img/mine/service/kefuing.png"/></span>
			</div>
		</div>
		<div class="header-ul">
			<ul>
				<li>
					<Cascader :data="data" v-model="value1">区域</Cascader>
				</li>
				<li>
					<Dropdown>
						<a href="javascript:void(0)">
							价格
							<Icon type="arrow-down-b"></Icon>
						</a>
						<Dropdown-menu slot="list">
							<span class="spans">价格区间（万）</span>
							<div class="text">
								<input type="text" />
								<span>-</span>
								<input type="text" />
							</div>
							<div class="divs">
								<div>50万以下</div>
								<div>50-80万</div>
								<div>80-120万</div>
								<div>120-150万</div>
								<div>150-200万</div>
								<div>200-300万</div>
								<div>300万以上</div>
							</div>
							<div class="div2">
								<i-button>不限条件</i-button>
								<i-button type="success">确认</i-button>
							</div>
						</Dropdown-menu>
					</Dropdown>
				</li>
				<li>
					<Dropdown>
						<a href="javascript:void(0)">
							房型
							<Icon type="arrow-down-b"></Icon>
						</a>
						<Dropdown-menu slot="list">
							<span class="spans">房型选择</span>
							<div class="divs">
								<div>一室</div>
								<div>二室</div>
								<div>三室</div>
								<div>四室</div>
								<div>五室</div>
								<div>五室以上</div>
							</div>
							<div class="div2">
								<i-button>不限条件</i-button>
								<i-button type="success">确认</i-button>
							</div>
						</Dropdown-menu>
					</Dropdown>
				</li>
				<li>
					<Dropdown>
						<a href="javascript:void(0)">
							建筑面积
							<Icon type="arrow-down-b"></Icon>
						</a>
						<Dropdown-menu slot="list">
								<div class="divs">
									<div>30m2</div>
									<div>30-50m2</div>
									<div>50-70m2</div>
									<div>70-90m2</div>
									<div>90-120m2</div>
									<div>120-150m2</div>
									<div>150-200m2</div>
									<div>200m2以上</div>
								</div>
							<div class="div2">
								<i-button>清空条件</i-button>
								<i-button type="success">确认</i-button>
							</div>
						</Dropdown-menu>
					</Dropdown>
				</li>
			</ul>
		</div>
		<div class="kong"></div>
		<div class="shop-1" v-for="(item,index) in model5">
			<router-link :to="item.tiao3">
				<div class="shop-2"><img :src="item.shopimg" /></div>
			</router-link>
			<div class="shop-3">
				<div class="list1">{{item.biaoti1}}</div>
				<div class="list2">{{item.biaoti2}}</div>
				<div class="list3">
					<div class="list3-1">{{item.biaoti3}}</div>
					<div class="list3-2">{{item.biaoti4}}</div>
				</div>
				<div class="list4"><span class="list4-1">{{item.biaoti5}}</span><span class="list4-2">{{item.biaoti6}}</span></div>
			</div>

		</div>
		<div class="dibu">
			<div class="dibu-1">{{dibu}}</div>
		</div>
	</div>

</template>

<script>
	export default {
		name: 'deal',
		data() {
			return {
				quxiao: "取消",
				tuijian: "为你推荐二手房",
				tianxie: "填写手机号，有新上房源,将第一时间通知你",
				dingyue: "免费订阅通知",
				dibu: "查看全部二手房源",
				cityList: [{
						value: 'ershoufang',
						label: '二手房'
					}, {
						value: 'zufang',
						label: '租房'
					},

				],
				model2: '',
				model5: [{
					shopimg: "",
					biaoti1: "中海.河山峻 3室2厅",
					biaoti2: "98.55m2/南/低楼层 共34层",
					biaoti3: "满两年",
					biaoti4: "随时可看",
					biaoti5: "2121万",
					biaoti6: "11,162元/平",
					tiao3: "/details/detail"
				}, {
					shopimg: "https://f11.baidu.com/it/u=1309776196,1349496497&fm=72",
					biaoti1: "中海.河山峻 3室2厅",
					biaoti2: "98.55m2/南/低楼层 共34层",
					biaoti3: "满两年",
					biaoti4: "随时可看",
					biaoti5: "2121万",
					biaoti6: "11,162元/平",
					tiao3: "/details/detail"
				}, {
					shopimg: "https://f12.baidu.com/it/u=1995183155,3292469211&fm=72",
					biaoti1: "中海.河山峻 3室2厅",
					biaoti2: "98.55m2/南/低楼层 共34层",
					biaoti3: "满两年",
					biaoti4: "随时可看",
					biaoti5: "2121万",
					biaoti6: "11,162元/平",
					tiao3: "/details/detail"
				}, {
					shopimg: "http://img0.imgtn.bdimg.com/it/u=992984899,1898978939&fm=26&gp=0.jpg",
					biaoti1: "中海.河山峻 3室2厅",
					biaoti2: "98.55m2/南/低楼层 共34层",
					biaoti3: "满两年",
					biaoti4: "随时可看",
					biaoti5: "2121万",
					biaoti6: "11,162元/平",
					tiao3: "/details/detail"
				}, {
					shopimg: "./static/shoyeimg/img/s1.jpg",
					biaoti1: "中海.河山峻 3室2厅",
					biaoti2: "98.55m2/南/低楼层 共34层",
					biaoti3: "满两年",
					biaoti4: "随时可看",
					biaoti5: "2121万",
					biaoti6: "11,162元/平",
					tiao3: "/details/detail"
				}, {
					shopimg: "http://img2.imgtn.bdimg.com/it/u=2183986798,2263080890&fm=26&gp=0.jpg",
					biaoti1: "中海.河山峻 3室2厅",
					biaoti2: "98.55m2/南/低楼层 共34层",
					biaoti3: "满两年",
					biaoti4: "随时可看",
					biaoti5: "2121万",
					biaoti6: "11,162元/平",
					tiao3: "/details/detail"
				}, {
					shopimg: "http://img4.imgtn.bdimg.com/it/u=2960965976,4130801658&fm=26&gp=0.jpg",
					biaoti1: "中海.河山峻 3室2厅",
					biaoti2: "98.55m2/南/低楼层 共34层",
					biaoti3: "满两年",
					biaoti4: "随时可看",
					biaoti5: "2121万",
					biaoti6: "11,162元/平",
					tiao3: "/details/detail"
				}, {
					shopimg: "http://img3.imgtn.bdimg.com/it/u=189868877,3456505666&fm=26&gp=0.jpg",
					biaoti1: "中海.河山峻 3室2厅",
					biaoti2: "98.55m2/南/低楼层 共34层",
					biaoti3: "满两年",
					biaoti4: "随时可看",
					biaoti5: "2121万",
					biaoti6: "11,162元/平",
					tiao3: "/details/detail"
				}, {
					shopimg: "http://img1.imgtn.bdimg.com/it/u=2928264639,3941727902&fm=26&gp=0.jpg",
					biaoti1: "中海.河山峻 3室2厅",
					biaoti2: "98.55m2/南/低楼层 共34层",
					biaoti3: "满两年",
					biaoti4: "随时可看",
					biaoti5: "2121万",
					biaoti6: "11,162元/平",
					tiao3: "/details/detail"
				}, {
					shopimg: "http://img3.imgtn.bdimg.com/it/u=2092909447,780671246&fm=26&gp=0.jpg",
					biaoti1: "中海.河山峻 3室2厅",
					biaoti2: "98.55m2/南/低楼层 共34层",
					biaoti3: "满两年",
					biaoti4: "随时可看",
					biaoti5: "2121万",
					biaoti6: "11,162元/平",
					tiao3: "/details/detail"
				}, {
					shopimg: "http://img3.imgtn.bdimg.com/it/u=2451182563,234071834&fm=26&gp=0.jpg",
					biaoti1: "中海.河山峻 3室2厅",
					biaoti2: "98.55m2/南/低楼层 共34层",
					biaoti3: "满两年",
					biaoti4: "随时可看",
					biaoti5: "2121万",
					biaoti6: "11,162元/平",
					tiao3: "/details/detail"
				}, {
					shopimg: "http://img3.imgtn.bdimg.com/it/u=2092909447,780671246&fm=26&gp=0.jpg",
					biaoti1: "中海.河山峻 3室2厅",
					biaoti2: "98.55m2/南/低楼层 共34层",
					biaoti3: "满两年",
					biaoti4: "随时可看",
					biaoti5: "2121万",
					biaoti6: "11,162元/平",
					tiao3: "/details/detail"
				}, {
					shopimg: "http://img1.imgtn.bdimg.com/it/u=2928264639,3941727902&fm=26&gp=0.jpg",
					biaoti1: "中海.河山峻 3室2厅",
					biaoti2: "98.55m2/南/低楼层 共34层",
					biaoti3: "满两年",
					biaoti4: "随时可看",
					biaoti5: "2121万",
					biaoti6: "11,162元/平",
					tiao3: "/details/detail"
				}, {
					shopimg: "http://img3.imgtn.bdimg.com/it/u=2092909447,780671246&fm=26&gp=0.jpg",
					biaoti1: "中海.河山峻 3室2厅",
					biaoti2: "98.55m2/南/低楼层 共34层",
					biaoti3: "满两年",
					biaoti4: "随时可看",
					biaoti5: "2121万",
					biaoti6: "11,162元/平",
					tiao3: "/details/detail"
				}],
                    value1: [],
                data: [{
                    value: 'beijing',
                    label: '北京',
                    children: [
                        {
                            value: 'gugong',
                            label: '故宫'
                        },
                        {
                            value: 'tiantan',
                            label: '天坛'
                        },
                        {
                            value: 'wangfujing',
                            label: '王府井'
                        }
                    ]
                }, {
                    value: 'jiangsu',
                    label: '江苏',
                    children: [
                        {
                            value: 'nanjing',
                            label: '南京',
                            children: [
                                {
                                    value: 'fuzimiao',
                                    label: '夫子庙',
                                }
                            ]
                        },
                        {
                            value: 'suzhou',
                            label: '苏州',
                            children: [
                                {
                                    value: 'zhuozhengyuan',
                                    label: '拙政园',
                                },
                                {
                                    value: 'shizilin',
                                    label: '狮子林',
                                }
                            ]
                        }
                    ],
                }]
			}

		},
		
		methods: {
			backs() {
				this.$router.go(-1);
			},
			success(nodesc) {
				this.$Notice.success({
					title: '填写成功，有相关房源立即通知您！',
					desc: nodesc ? '' : '填写成功 '
				});
			},
		},

	}
</script>
<style scoped>
	.agent {
		background: white;
		width: 7.5rem;
		height: 0.99rem;
		display: flex;
		padding: 0.2rem 0.2rem;
		position: fixed;
		z-index: 999;
	}
	
	.agent-1 {
		width: 6.06rem;
		height: 0.57rem;
		background: gainsboro;
		border-radius: 0.08rem;
		display: flex;
		align-items: center;
	}
	
	input {
		width: 5rem;
		height: 0.57rem;
		margin-left: 0.1rem;
	}
	
	input::-webkit-input-placeholder {
		color: gray;
		font-size: 12px;
		padding: 0rem 0.3rem;
	}
	
	.agent-1>span {
		display: block;
		position: absolute;
		text-align: center;
		float: right;
		margin-right: 0.05rem;
		width: 1.2rem;
		height: 0.52rem;
		right: 0;
		font-size: 14px;
		color: gray;
		background: white;
	}
	
	.addres-2-1 {
		width: 7.5rem;
		height: 1.2rem;
	}
	
	.addres-2 {
		width: 7.5rem;
		height: 0.8rem;
		line-height: 0.8rem;
		font-size: 14px;
		padding: 0rem 0.3rem;
		color: black;
	}
	
	.lianxi {
		width: 7.5rem;
		height: 4rem;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.addres-4 {
		width: 6.76rem;
		height: 3.32rem;
		border: 1px solid gainsboro;
		border-radius: 0.1rem;
	}
	
	.addres-4>div {
		width: 6.76rem;
		height: 1rem;
	}
	
	.addre-5 {
		line-height: 1rem;
		font-size: 12px;
		color: black;
		padding: 0rem 0.4rem;
	}
	
	.addre-6>input {
		margin-left: 0.2rem;
		border: none;
	}
	
	.addre-6>input::-webkit-input-placeholder {
		color: black;
		font-size: 14px;
	}
	
	.addre-7 {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.addre-7>span {
		display: block;
		width: 5.98rem;
		height: 0.94rem;
		background: #00ae66;
		color: white;
		font-size: 14px;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	
	.shop-1 {
		width: 7.5rem;
		height: 2rem;
		margin-top: 0.6rem;
		display: flex;
	}
	
	.shop-2 {
		width: 2.31rem;
		height: 2rem;
		padding: 0rem 0.2rem;
	}
	
	.shop-2>img {
		width: 2.31rem;
		height: 2rem;
	}
	
	.shop-3 {
		width: 4.61rem;
		height: 2rem;
		margin-left: 0.5rem;
	}
	
	.shop-3>div {
		height: 0.51rem;
		width: 4.61rem;
	}
	
	.list1 {
		color: #000000;
		font-size: 14px;
	}
	
	.list2 {
		font-size: 12px;
		color: gray;
	}
	
	.list3 {
		display: flex;
		font-size: 12px;
		color: gray;
	}
	
	.list4 {
		font-size: 14px;
	}
	
	.list3-1 {
		font-size: 10px;
		text-align: center;
		color: #4ed6e4;
		width: 1.2rem;
		height: 0.34rem;
		background: #e1f5f8;
		border-radius: 0.05rem;
	}
	
	.list3-2 {
		font-size: 10px;
		text-align: center;
		color: #74d5ae;
		width: 1.2rem;
		height: 0.34rem;
		background: #c3ecdc;
		margin-left: 0.2rem;
		border-radius: 0.05rem;
	}
	
	.list4-1 {
		color: red;
	}
	
	.list4-2 {
		color: gray;
		padding: 0rem 0.2rem;
	}
	
	.dibu {
		margin-top: 0.4rem;
		width: 7.5rem;
		height: 3rem;
		padding: 0.4rem 0.55rem;
	}
	
	.dibu-1 {
		width: 6.18rem;
		height: 0.97rem;
		background: plum;
		line-height: 0.97rem;
		text-align: center;
		color: purple;
		border-radius: 0.1rem;
	}
	.header-ul{
		width: 100%;
		height: 1.45rem;
		position: fixed;
		left:0;
		top:0.99rem;
		background: white;
	}
	.header-ul>ul {
		list-style: none;
		width: 100%;
		height: 1rem;
	}
	
	.header-ul>ul>li {
		width: 1.8rem;
		height: 100%;
		float: left;
		font-size: 0.2rem;
		font-weight: bold;
		text-align: center;
		padding:0.4rem 0;
	}
	.agent-1>span>img{
		width:0.5rem;
		height:0.5rem;
	}
	.kong{
		width:100%;
		height:2.45rem;
	}
		.text>input{
		width:3rem;
	}
		.divs{
		width:7rem;
		height:3rem;
	}
	.divs>div{
		width:2rem;
		height:0.5rem;
		float:left;
		margin:0.2rem 0.1rem;
		background:#B6BABB;
		border-radius:0.2rem;
		font-size:0.2rem;
		color:gray;
	}
	.div2{
		width:7rem;
		height:1rem;
		margin: auto;
	}
	.div2>button{
		width:3rem;
		float:left;
		margin:0 0.2rem;
	}
	.divs2>div{
		width:2rem;
		height:0.5rem;
		float:left;
		margin:0.2rem 0.1rem;
		background:#B6BABB;
		border-radius:0.2rem;
		font-size:0.2rem;
		color:gray;
	}
	.spans{
		width:6rem;
		height:0.5rem;
		font-size:0.2rem;
	}
</style>
